<template>
  <section class="system-mes-tel">
    <div :class="['system-mes-tel__content',  module === 'daily' ? 'daily' : null ]">
      <!-- 消息预览组件 -->
      <sys-template-view
        :class="[module === 'daily' ? 'content-daily-left' : null]"
        :module="module"
        :is-trigger="isTrigger"
        :sys-title.sync="sourceData.sysTitle"
        :sys-content.sync="sourceData.sysContent"
        :sys-display-field-check-map="sourceData.sysDisplayFieldCheckMap"
        :sys-check-key-map="sysCheckKeyMap">
      </sys-template-view>
      
      <div class="content-right" :style="{width: module === 'daily' ? '360px' : '327px'}">
        <!-- 通用消息不需要展示 -->
        <template v-if="module !== 'universal'">
          <!-- 智能报告类型的消息 系统消息独有 -->
            
          <SysTemplateOprDaily
            v-if="module === 'daily'"
            :sys-display-field-check-map="sourceData.sysDisplayFieldCheckMap"
            :sys-detail-display-field-check-map.sync="sysDetailCheckKeyMap"
            :sys-detail-check-key-map.sync="sysDetailCheckKeyMap"
            :sys-check-key-map.sync="sysCheckKeyMap"
          >
          </SysTemplateOprDaily>

          <!-- 客服中心和工单中心的消息，系统消息展示这块 -->
          <SysTemplateOperate
            v-else
            :sys-display-field-check-map="sourceData.sysDisplayFieldCheckMap"
            v-model="sysCheckKeyMap"
          >
          </SysTemplateOperate>
        </template>
      </div>
    </div>
    <div class="system-mes-tel__show">
        <h4>展示方式: </h4>
        <el-checkbox-group v-model="displayTypeList" class="show-content">
          <el-checkbox label="1" disabled>消息中心展示</el-checkbox>
          <el-checkbox label="2" >右侧悬浮框展示</el-checkbox>
          <el-popover
            placement="top"
            width="600"
            trigger="hover"
            popper-class="example">
            <img
              style="height:320px;"
              :src="messageShowSampleImage"
            />
            <i class="iconfont icon-question-circle" slot="reference"></i>
          </el-popover>
        </el-checkbox-group>
    </div>
  </section>
</template>

<script>
// 消息预览组件
import SysTemplateView from './sys/SysTemplateView.vue'

// 非智能报告类别的系统消息设置组件
import SysTemplateOperate from './sys/SysTemplateOperate.vue'

// 智能报告类别的系统消息设置组件
import SysTemplateOprDaily from './sys/SysTemplateOprDaily.vue'
import { getLocalesOssUrl } from '@src/util/assets'
const messageShowSampleImage = getLocalesOssUrl('/message_show_sample.png')
export default {
  // 系统消息模版
  name:'system-mes-tel',

  data(){
    return{
      messageShowSampleImage,
      // 消息中心中展示的字段
      sysCheckKeyMap:[],
      // 记录sysCheckKeyMap初始值，用于提交时判断是否有修改
      sysCheckKeyInitMap:[],

      // 日报类型的系统消息特有的'详情中展示'字段
      sysDetailCheckKeyMap:[],
      // 记录sysDetailCheckKeyMap初始值，用于提交时判断是否有修改
      sysDetailCheckKeyInitMap:[],

      // 展示方式
      displayTypeList:[],
      // 记录displayTypeList初始值，用于提交时判断是否有修改
      displayTypeInitList:[],
      sysTitleInit: '',
      sysContentInit: ''
    }
  },

  props:{
    sourceData:{
      type:Object,
      required:true
    },

    // 当前渠道的channel值
    channel:{
      type:[String,Number],
      required:true
    },
    
    // 当前选中的渠道
    sendChannelList:{ 
      type:Array,
      required:true
    },
    // 是否校验模版内容变化 默认要校验 触发器不校验
    isValidateChange: {
      type: Boolean,
      default: true
    },
    // 是否是触发器
    isTrigger: {
      type: Boolean,
      default: false
    },
  },
  components:{
    SysTemplateView,
    SysTemplateOprDaily,
    SysTemplateOperate
  },

  inject: ['module'],

  mounted(){
    this.switchSysMesTemplateData()
  },

  methods:{
    // 将数组对象中的check为true的提取出来
    // [{canCancel:false,check:false,defaultValue:'',key:'',value:''}] => [ key ]
    getCheckKey(checkMap){
      let checkKeyArr = []

      checkMap.map(item => {

        const { key, check } = item;
        
        check && (checkKeyArr.push(key));
      })
        
      return checkKeyArr
    },

    // 将接口获取到的数据转换成系统消息模版需要的数据
    // this.sourceData = {
    //   displayTypeList:['1','2'],//展示方式：1 消息中心展示，2 右侧悬浮框展示
    //   sysContent:"内容",//消息内容
    //   sysDetailDisplayFieldCheckMap：[{canCancel:false,check:false,defaultValue:'',key:'',value:''}],//详情中展示的字段
    //   sysDisplayFieldCheckMap:[{canCancel:false,check:false,defaultValue:'',key:'',value:''}],//消息中心展示的字段
    //   sysTitle:''//消息标题
    // }
    switchSysMesTemplateData(data){
      const { sysDisplayFieldCheckMap = [], displayTypeList = [], sysDetailDisplayFieldCheckMap = [], sysTitle, sysContent } = this.sourceData || {}

      // 展示方式
      this.displayTypeList = displayTypeList || []
      // 记录displayTypeList初始值，用于提交时判断是否有修改
      this.displayTypeInitList = [ ...this.displayTypeList ]

      this.sysTitleInit = sysTitle

      this.sysContentInit = sysContent

      // [{canCancel:false,check:false,defaultValue:'',key:'',value:''}] => ['key']
      const messageCheckKeyArr = this.getCheckKey(sysDisplayFieldCheckMap || [])
      // 将已经勾选的key存储起来，数据结构为[key]
      this.sysCheckKeyMap = [ ...messageCheckKeyArr ]
      // 记录sysCheckKeyMap初始值，用于提交时判断是否有修改
      this.sysCheckKeyInitMap = [ ...this.sysCheckKeyMap ]

      // 智能报告类型的系统消息，会多一个字段，详情中展示的字段
      if(this.module === 'daily'){
        // [{canCancel:false,check:false,defaultValue:'',key:'',value:''}] => ['key']
        let detailCheckKeyArr = this.getCheckKey(sysDetailDisplayFieldCheckMap || [])
        // 日报类型的系统消息特有的'详情中展示'字段
        this.sysDetailCheckKeyMap = [ ...detailCheckKeyArr ],
        // 记录sysDetailCheckKeyMap初始值，用于提交时判断是否有修改
        this.sysDetailCheckKeyInitMap = [ ...this.sysDetailCheckKeyMap ]
      }
    },

    // 供父组件调用，返回校验结果，当校验失败resolve里面传入失败原因
    validate(){
      // 当前渠道是否被勾选了
      const isSelected = this.sendChannelList.includes(this.channel)
      const { sysTitle, sysContent } = this.sourceData
      if(!sysTitle) return Promise.resolve('请输入标题')
      if(!sysContent) return Promise.resolve('请输入子标题内容')
      // 如果是智能日报 也只需要校验sysCheckKeyMap字段，
      let check = this.sysCheckKeyMap?.length > 0 ? true : `您${isSelected ? '勾选了' : '修改了'}系统消息渠道，请至少在模板中勾选一个字段`

      return Promise.resolve(check)
    },

    // 判断是否有修改,oldkey=初始值，newKey=目前的值，返回true表示有改动
    compareValIsChange(keyObj){
      const { oldkey, newKey } = keyObj
      const initVal = this[oldkey]
      const checkVal = this[newKey]

      if( initVal.length !== checkVal.length) return true

      return checkVal.some(item => {
        return !initVal.includes(item)
      })
    },

    // 判断当前模版是否有修改,返回true表示有修改
    isChange(){
      // 消息中展示模块的数据、展示方式
      let compareArr = [
        {
          oldkey:'sysCheckKeyInitMap',
          newKey:'sysCheckKeyMap'
        },
        {
          oldkey:'displayTypeInitList',
          newKey:'displayTypeList'
        },
      ]

      // 智能报告类型的系统消息，会多一个字段，详情中展示的字段
      this.module === 'daily' && (compareArr.push({
        oldkey:'sysDetailCheckKeyInitMap',
        newKey:'sysDetailCheckKeyMap'
      }));

      let compareResult = compareArr.map(item => {
        return this.compareValIsChange(item)
      })
  
      const { sysTitle, sysContent } = this.sourceData
      if(this.sysTitleInit !== sysTitle || this.sysContentInit !== sysContent) {
        return true
      }
      return compareResult.includes(true)
    },

    // 父组件调用，整理接口需要的参数
    getParam(){
      // 当没有改动,直接返回
      const isChangeVal = this.isChange()

      if(!isChangeVal && this.isValidateChange) return { systemTemplateParam:null }
      const { id, sysDisplayFieldCheckMap = [], sysDetailDisplayFieldCheckMap = [], sysTitle, sysContent } = this.sourceData

      // 将勾选的字段数据格式转为接口需要的格式
      const sysCheckKeyMap = this.displayFieldSwitch(sysDisplayFieldCheckMap, this.sysCheckKeyMap)

      let param = {
        sysDisplayFieldCheckMap:sysCheckKeyMap,
        displayTypeList:this.displayTypeList,
        sysTitle,
        sysContent
      }
      if(!this.isValidateChange) {
        // 触发器系统消息模版需要传id
        param.id = id
      }
      
      // 智能报告类型的系统消息，会多一个字段，详情中展示的字段
      if(this.module === 'daily'){
        const sysDetailCheckKeyMap = this.displayFieldSwitch(sysDetailDisplayFieldCheckMap, this.sysDetailCheckKeyMap)
        param.sysDetailDisplayFieldCheckMap = sysDetailCheckKeyMap
      }



      return { systemTemplateParam: param }
    },

    /**
     * 根据fieldCheckMap字段更新allFieldMap的check字段
     * @param {Array} allFieldMap - 所有字段列表,数据结构为[{defaultValue:'',key:'key1',value:''，check：false,canCancel:''}]
     * @param {Array} fieldCheckMap - 勾选的消息字段列表，数据结构为['key1']
     * @return {Array} switchSelCheckMap - [{defaultValue:'',key:'key1',value:''，check：true,canCancel:''}]
     */
    displayFieldSwitch(allFieldMap, fieldCheckMap){
      let switchSelCheckMap = []
      
      for(let item of allFieldMap){

        const { key } = item;

        if(!fieldCheckMap.includes(key)) continue;

        let newItem = { 
          ...item,
          check:true
        }

        switchSelCheckMap.push(newItem);
      }

      return switchSelCheckMap
    }
  }
}
</script>

<style lang="scss" scoped>
.system-mes-tel{
  display: flex;
  height: 100%;
  flex-direction: column;
  padding:24px 24px 0 24px;
  box-sizing: border-box;
  &__content{
    flex: 1;
    background: #ffff;
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: 16px 0 16px 16px;
    border-radius: 4px;
    &:before{
      content: '';
      width: 1px;
      height: calc(100% - 32px);
      background: #D9D9D9;
      position: absolute;
      top: 50%;
      left: calc(50% + 8px);
      transform: translate(-50%, -50%);
    }
    &.daily{
      &:before {
        left: calc(50% - 21px);
      }
      ::v-deep .daily-message-config .right-checkbox{
        margin-right: 10px;
      }
    }
  }
  &__show{
    display: flex;
    align-items: center;
    margin: 18px 0 24px 0;
    h4{
      margin-bottom: 0;
      color: #262626;
      font-size: 14px;
      margin-right: 10px;
      font-weight: 400;
    }
    .el-checkbox-group{
      display: flex;
      align-items: center;
    }
  }
  .content-daily-left{
    width:300px
  }
  .content-right{
    min-height:310px;
    h4{
      font-size: 14px;
      color: #262626;
      line-height: 22px;
    }
  }
  .icon-question-circle{
    margin-left:9px;
    color:#595959;
    cursor: pointer;
    font-weight: 600;
  }

  .show-content{
    .el-checkbox.is-disabled{
      display: block;
    }
    .el-checkbox{
      /* line-height: 20px; */
      /* margin-bottom: 8px; */
    }
  }
}

</style>

<style lang="scss">
.example{
  z-index:3001 !important;
}
</style>